import CustomTextArea from '@/components/antd-comp/input/CustomTextArea'
import { showMessage } from '@/components/antd-comp/message'
import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import ThemeBtn from '@/components/antd-comp/theme-btn'
import { Button, Checkbox, Spin, Tooltip } from 'antd'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { topLineCalendar } from '../API'
import '../css/styles.less'
import { SvgSuccess } from './ApplicationSvgInfo'

export default function ApplicationTopLineCont({ assistant_id = '', TopLine, wxdata, endList, info, setInfo }) {
  /* 生成日志 */
  const { id } = useParams()
  const [SpinHid, setSpin] = useState(false)
  const navigate = useNavigate()
  const calendarFun = async () => {
    try {
      setSpin(true)
      const data = await topLineCalendar(id)

      if (!data || Object.keys(data).length === 0) {
        showMessage({
          content: '暂无数据',
          type: 'warning'
        })
        setSpin(false)
        return
      }
      const list = transformData(data)
      setSpin(false)
      const stringLast = '产生了变更'
      const logs = list.filter(item => item.text).map(item => `${item.text}${stringLast}，`).join('').slice(0,-1)
      const info = {
        ...childrenInfo,
        logs
      }
      setChildrenIInfo(info)
      setInfo(info)
    } catch (err) {
      console.error(err)
      setSpin(false)
    }
  }
  const transformData = data => {
    return Object.keys(data).map(key => ({
      draft: data[key].draft,
      release: data[key].release,
      text: data[key].text
    }))
  }
  const [childrenInfo, setChildrenIInfo] = useState(info)
  const [ApplicationMouseNum, setApplicationMouseNum] = useState(10)

  /* 判断上线状态 */
  const [modalHid, setModalHid] = useState(false)
  useEffect(() => {
    if (info.platform_baiying_on) {
      setModalHid(true)
    }
  }, [])
  const [platform_baiying_on_hid, set_platform_baiying_on_hid] = useState(false)

  return (
    /* TopLine 判断上线 显示 */
    <div className="flexCol ApplicationTopLineCont_case">
      {/* 上线日志 */}
      {!TopLine ? (
        <>
          <div className="flexRowStart">
            <span className="ApplicationTopLineCont_case_title">上线日志</span>
            <span
              className="ApplicationTopLineCont_case_tag flexRow cursonCase"
              onClick={() => {
                calendarFun()
              }}
            >
              快速生成
            </span>
          </div>
          <Spin tip="生成中..." spinning={SpinHid}>
            <CustomTextArea
              value={childrenInfo.logs}
              className="ApplicationTopLineCont_put"
              onChange={e => {
                const info = {
                  ...childrenInfo,
                  logs: e.target.value
                }
                setChildrenIInfo(info)
                setInfo(info)
              }}
              placeholder="输入上线版本记录"
              rows={4}
              maxLength={500}
            ></CustomTextArea>
          </Spin>
          {/* 上线平台 */}
          <span className="ApplicationTopLineCont_case_title">上线平台</span>
          <span className="ApplicationTopLineCont_case_desc">
            将智能体上线至以下平台，即您已理解并同意依照各渠道平台所规定的服务条款（包括但不限于任何隐私政策、社区规范、数据使用及处理协议等相关内容)。
          </span>
        </>
      ) : (
        <SvgSuccess></SvgSuccess>
      )}
      {/* 智算服务平台 */}
      <div className="ApplicationTopLineCont_case_tem flexRow flexRowJustBet">
        <div className="flexRowStart">
          {/* <SvgAI></SvgAI> */}
          <span className="ApplicationTopLineCont_case_tem_name">智算服务平台</span>
          <div className="ApplicationTopLineCont_case_tem_tag flexRow">系统</div>
        </div>
        {!TopLine ? (
          <div className="flexRowStart">
            <span className="ApplicationTopLineCont_case_radius">公开范围</span>
            <CustomSelect
              className="ApplicationTopLineCont_case_select"
              defaultValue={childrenInfo.platform_app_visable}
              onChange={e => {
                const info = {
                  ...childrenInfo,
                  platform_app_visable: e
                }
                setChildrenIInfo(info)
                setInfo(info)
              }}
              options={[
                { value: 1, label: '仅个人' },
                { value: 2, label: '企业内部' }
              ]}
            ></CustomSelect>
            <Tooltip title="暂未开放，敬请期待">
              <Checkbox
                onChange={e => {
                  const info = {
                    ...childrenInfo,
                    platform_app_on: e.target.checked
                  }
                  setChildrenIInfo(info)
                  setInfo(info)
                }}
                checked={childrenInfo.platform_app_on}
                disabled={true}
              ></Checkbox>
            </Tooltip>
          </div>
        ) : (
          <div
            style={{ margin: '0 0 0 8px' }}
            onClick={() => {
              const state = { assistant_id }
              navigate('/chat', { state })
            }}
            className="ApplicationTopLineCont_case_select flexRow flexRow ApplicationTopLineCont_case_selectbor cursonCase"
          >
            跳转智能体
          </div>
        )}
      </div>
      {/* 百应AI */}
      {/* {((TopLine && childrenInfo.platform_baiying_on) || !TopLine) && (
        <div className="ApplicationTopLineCont_case_tem flexRow flexRowJustBet" style={{ margin: '8px 0' }}>
          <div className="flexRowStart">
            <SvgBaiYing></SvgBaiYing>
            <span className="ApplicationTopLineCont_case_tem_name">百应AI</span>
          </div>
          {!TopLine ? (
            <div className="flexRowStart">
              <span className="ApplicationTopLineCont_case_radius">公开范围</span>
              <CustomSelect
                className="ApplicationTopLineCont_case_select"
                defaultValue={childrenInfo.platform_baiying_visable}
                onChange={e => {
                  const info = {
                    ...childrenInfo,
                    platform_baiying_visable: e
                  }
                  setChildrenIInfo(info)
                  setInfo(info)
                }}
                options={[
                  { value: 1, label: '仅个人' },
                  { value: 2, label: '企业内部' }
                ]}
              ></CustomSelect>
              <div className="flexColCen checkBox_post">
                <Checkbox
                  checked={childrenInfo.platform_baiying_on}
                  onChange={e => {
                    if (modalHid && !e.target.checked) {
                      set_platform_baiying_on_hid(true)
                      return
                    }
                    const info = {
                      ...childrenInfo,
                      platform_baiying_on: e.target.checked
                    }
                    setChildrenIInfo(info)
                    setInfo(info)
                  }}
                ></Checkbox>
                {modalHid && (
                  <span
                    className={
                      childrenInfo.platform_baiying_on
                        ? 'checkBox_post_statusName_topline checkBox_post_statusName flexRow'
                        : 'checkBox_post_statusName flexRow'
                    }
                  >
                    {childrenInfo.platform_baiying_on ? '已上线' : '下线'}
                  </span>
                )}
              </div>
            </div>
          ) : (
            <div className="flexRowStart">
              {endList.map((item, index) => {
                return (
                  <div
                    onMouseEnter={() => {
                      setApplicationMouseNum(index)
                    }}
                    onMouseLeave={() => {
                      setApplicationMouseNum(10)
                    }}
                    onClick={() => {
                      if (item.name === '网页端') {
                        if (!item.url) {
                          showMessage({
                            content: '链接失效',
                            type: 'warning'
                          })
                          return
                        }
                        const w = window.open('about:blank')
                        w.location.href = item.url
                      }
                    }}
                    key={item.id}
                    style={{ margin: '0 0 0 8px' }}
                    className="ApplicationTopLineCont_case_select flexRow flexRow ApplicationTopLineCont_case_selectbor"
                  >
                    <span className="cursonCase">{item.name}</span>
                    {item.type && ApplicationMouseNum === index && (
                      <div
                        className="ApplicationLoadInfo_pos"
                        onMouseEnter={() => {
                          setApplicationMouseNum(index)
                        }}
                      >
                        <ApplicationLoadInfo type={item.type} url={item.url}></ApplicationLoadInfo>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          )}
        </div>
      )} */}
      {/* 微信内容  */}
      {/* <span className="ApplicationTopLineCont_case_desc">微信</span> */}
      {/* {wxdata.map(item => {
        return (
          <div
            key={item.name}
            style={{ marginBottom: '8px' }}
            className="ApplicationTopLineCont_case_tem flexRow flexRowJustBet"
          >
            <div className="flexRowStart">
              <SvgWX></SvgWX>
              <span className="ApplicationTopLineCont_case_tem_name">{item.name}</span>
            </div>
            {!TopLine ? (
              <div className="flexRowStart">
                <span className="ApplicationTopLineCont_case_radius">配置状态</span>
                <div
                  className={
                    item.type === 1
                      ? 'ApplicationTopLineCont_case_select flexRow ApplicationTopLineCont_case_selectbor  ApplicationTopLineCont_case_selectCustom'
                      : 'ApplicationTopLineCont_case_select flexRow flexRow ApplicationTopLineCont_case_selectbor cursonCase'
                  }
                >
                  {item.type === 1 ? '已配置' : '待配置'}
                </div>
                <Checkbox onChange={() => {}} checked={item.checked}></Checkbox>
              </div>
            ) : (
              <span className="ApplicationTopLineCont_case_desc" style={{ color: '#69798F' }}>
                请前往微信订阅号体验
              </span>
            )}
          </div>
        )
      })} */}
      {platform_baiying_on_hid ? (
        <ModalComponent
          title="下线提醒"
          width={420}
          content={
            <div className="flexRowStart">
              <span style={{ fontSize: '14px', fontWeight: '400', color: '#131921', margin: '12px 0 30px' }}>
                取消勾选后，此智能体将在该平台下线
              </span>
            </div>
          }
          onCancel={() => {
            set_platform_baiying_on_hid(false)
          }}
          style={{ top: '45%' }}
          footer={
            <div className="flexRow">
              <Button
                key="cancel"
                onClick={e => {
                  set_platform_baiying_on_hid(false)
                }}
                style={{ marginRight: '6px' }}
                className="closeBtnStyles closeBtnWid"
                shape="round"
              >
                保留勾选
              </Button>
              <ThemeBtn
                onClick={e => {
                  const info = {
                    ...childrenInfo,
                    platform_baiying_on: false
                  }
                  setChildrenIInfo(info)
                  setInfo(info)
                  set_platform_baiying_on_hid(false)
                }}
                key="create"
                style={{ marginLeft: '6px' }}
                className="closeBtnWid application_rightBtn"
              >
                确定下线
              </ThemeBtn>
            </div>
          }
        />
      ) : null}
    </div>
  )
}
